<?php
use frontend\assets\AppAsset;

AppAsset::addCss($this, '@web/css/tools/style.css')
?>
<div class="body">
    <div id="section">
        <div id="nav">
            <ol class="nav">
                <?php foreach ($controller_list as $controller){?>
                <li class="items">
                    <div class="title">
                        <p class="text"><?php echo $controller['controller']?></p>
                        <p class="explain">（<?php echo $controller['title']?>）</p>
                    </div>
                    <ul class="sub-nav">
                        <?php foreach ($controller['method_info'] as $action){?>
                        <li>
                            <p class="text"><a href="javascript:;" data-controller="<?php echo $controller['controller'] ?>"  data-action="<?php echo $action['name'] ?>" class="show-action"><?php echo $action['name']?></a></p>
                            <p class="explain">（<?php echo $action['title']?>）</p>
                        </li>
                        <?php }?>
                    </ul>

                </li>
                <?php }?>
            </ol>
        </div>
        <div id="aside" style="display: block">

        </div>
    </div>
</div>
<?php
$js = <<<JS
    $(function() {
        $(".nav").on("click",".items .title",function(){
            var target = $(this).siblings("ul");
            if(target.is(".active")){
                listShowHide(target,"hide");
                target.removeClass("active");
            }else {
                listShowHide(target,"show");
                target.addClass("active");
            }
        });
        function listShowHide(target ,data){
            if(data && data === "show"){
                target.stop().slideDown();
            }else {
                target.stop().slideUp();
            }
        }
        
        $('#section').on('click','.show-action',show_action_html);
        
        
        function show_action_html() {
            var action_name = $(this).attr('data-action');
            var controller_name = $(this).attr('data-controller');
            $.ajax({
                url:'index.php?r=tools/detail',
                method:'post',
                dataType:'json',
                data:{action_name:action_name,controller_name:controller_name},
                success:function(resp) {
                    $('#section').find('#aside').html('');
                    var html = implode_html(resp['method_info'],action_name);
                    $('#section').find('#aside').html(html);
                    document.querySelector("#"+action_name).scrollIntoView();
                },
                error:function(error) {
                    console.log(error);
                }
            })
        }
        
        function implode_html(resp,action_name) {
            var html = '';
            $.each(resp,function(key,action) {
                console.log(action);
                html += '<div id="'+action_name+'" class="section_content_main message_items">' +
                                '<p class="main_title">'+action.name+''+
                                    '<span class="explain">（'+action.title+'）</span>' +
                                '</p>' +
                                '<ul class="data_port_list">' +
                                    build_params(action) +
                                    '<li class="items block">' +
                                        '<button class="btn_port">测试接口:</button>' +
                                        '<div class="content">' +
                                            '<textarea  class="request_url"></textarea>' +
                                        '</div>' +
                                    '</li>' +
                                '</ul>' +
                            '</div>';
            });
            return html;
        }
        
        
        function build_params(action) {
            var html = '';
            if (!$.isEmptyObject(action['request'])){
                if(!$.isEmptyObject(action['request']['GET'])){
                    $.each(action['request']['GET'],function(get_param,get_comment) {
                        html += '<li class="items">' +
                                '<span class="title">'+get_param+'('+get_comment+'):</span>' +
                                '<div class="content">' +
                                    '<input type="text" placeholder="GET">' +
                                '</div>' +
                            '</li>';                        
                    })  
                }
                
                if(!$.isEmptyObject(action['request']['POST'])){
                    $.each(action['request']['POST'],function(post_param,post_comment) {
                        html += '<li class="items">' +
                                '<span class="title">'+post_param+'('+post_comment+'):</span>' +
                                '<div class="content">' +
                                    '<input type="text" placeholder="POST">' +
                                '</div>' +
                            '</li>';                        
                    })  
                }
            }
            
            return html;
        }
    })
JS;
$this->registerJs($js, \yii\web\View::POS_END);
?>
